<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">

    <title>商品管理</title>

    <link rel="stylesheet" type="text/css" href="<%=path %>/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=path %>/themes/icon.css">
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            color:#666;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
    </style>
    <script type="text/javascript" src="<%=path %>/js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=path %>/js/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        var url;
        function showError(msg) {
            $.messager.show({
                title: 'Error',
                msg: msg
            });
        }
        function newUser(){
            $('#dlg').dialog('open').dialog('setTitle','新商品');
            $('#fm').form('clear');
            url = '<%=path %>/goods/add';
        }
        function editUser(){
            var row = $('#dg').datagrid('getSelected');
            console.log(row.goodstype);
            if(row.goodstype == "水果")
                $("#updateselect").find("option[value='1']").attr("selected","selected");
            if(row.goodstype == "手工品")
                $("#updateselect").find("option[value='2']").attr("selected","selected");
            if(row.goodstype == "服装")
                $("#updateselect").find("option[value='3']").attr("selected","selected");
            if(row.goodstype == "零食")
                $("#updateselect").find("option[value='4']").attr("selected","selected");
            if (row){
                $('#dlg2').dialog('open').dialog('setTitle','修改项目');
                $('#fm2').form('load',row);
                url = '<%=path %>/goods/update';
            }else {
                showError('请选中一条');
            }
        }
        function updateUser(){
            //console.log($("#updateselect option:selected").val());
            //console.log($("#updategoodstype").val());
            $("#updategoodstype").val($("#updateselect option:selected").val())
            $('#fm2').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.success){
                        $('#dlg2').dialog('close');		// close the dialog
                        $('#dg').datagrid('reload');	// reload the user data
                    } else {
                        showError(result.msg);
                    }
                }
            });
        }
        function saveUser(){
            $("#addgoodstype").val($("#addselect option:selected").val());
            $('#fm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.success){
                        $('#dlg').dialog('close');		// close the dialog
                        $('#dg').datagrid('reload');	// reload the user data
                    } else {
                        showError(result.msg);
                    }
                }
            });
        }
        function removeUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $.messager.confirm('Confirm','你确定要删除么?',function(r){
                    if (r){
                        $.post('/goods/delete',{goodsId : row.goodsId},function(result){
                            if (result.success){
                                $('#dg').datagrid('reload');	// reload the user data
                            } else {
                                showError(result.msg);
                            }
                        },'json');
                    }
                });
            }else {
                showError('请选中一条');
            }
        }
    </script>

</head>

<body class="easyui-layout">

<table id="dg" title="商品列表" class="easyui-datagrid"
       url="<%=path %>/goods/list" iconCls="icon-save" pagination="true"
       toolbar="#toolbar" rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>

    <tr>
        <th field="goodsId" width="50">商品id</th>
        <th field="goodstype" width="50">商品类别</th>
        <th field="goodsName" width="50">商品名称</th>
        <th field="goodsContent" width="50">商品描述</th>
        <th field="price" width="50">价格</th>
        <th field="stock" width="50">库存</th>
        <th field="salesNum" width="50">销量</th>
        <th field="goodsImg" width="50">图片</th>
    </tr>
    </thead>

</table>

<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">修改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除</a>
</div>

<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
   <%-- <div class="">User Information</div>--%>
        <div class="ftitle">
            <label>商品类别:</label>

            <select id="addselect">
                <option value="1" selected="selected">水果</option>
                <option value="2">手工品</option>
                <option value="3">服装</option>
                <option value="4">零食</option>
            </select>
        </div>
    <form id="fm" method="post" novalidate>
        <input name="goodstype" value="" type="hidden" id="addgoodstype"/>
        <div class="fitem">
            <label>商品名称:</label>
            <input name="goodsName">
        </div>
        <div class="fitem">
            <label>商品描述:</label>
            <textarea name="goodsContent" cols="22" rows="3" ></textarea>
        </div>
        <div class="fitem">
            <label>价格:</label>
            <input name="price" />
        </div>
        <div class="fitem">
            <label>库存:</label>
            <input name="stock" />
        </div>
        <div class="fitem">
            <label>图片url:</label>
            <input name="goodsImg" />
        </div>

    </form>
</div>
<div id="dlg2" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
     closed="true" buttons="#dlg2-buttons">
    <%--<div class="ftitle">User Information</div>--%>
        <div class="ftitle">
            <label>商品类别:</label>
            <select id="updateselect">
                <option value="1" selected="selected">水果</option>
                <option value="2">手工品</option>
                <option value="3">服装</option>
                <option value="4">零食</option>
            </select>
        </div>
    <form id="fm2" method="post" novalidate>
        <input name="goodsId" type="hidden">
        <input name="goodstype" value="" type="hidden" id="updategoodstype"/>
        <div class="fitem">
            <label>商品名称:</label>
            <input name="goodsName">
        </div>
        <div class="fitem">
            <label>商品描述:</label>
            <textarea name="goodsContent" cols="22" rows="3" ></textarea>
        </div>
        <div class="fitem">
            <label>价格:</label>
            <input name="price" />
        </div>
        <div class="fitem">
            <label>库存:</label>
            <input name="stock" />
        </div>
        <div class="fitem">
            <label>图片url:</label>
            <input name="goodsImg" />
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
<div id="dlg2-buttons">
    <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="updateUser()">修改</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg2').dialog('close')">取消</a>
</div>
</body>
</html>

